<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view">
			</view>
		</view>
		<!-- #endif -->
		<view class="myPage">
			<view class="myBanner constant">
				<view class="myHaad vertical">
					<text class="text">Hi，{{userinfo.nickname}}</text>
					<view class="myHeader" @tap="golink()">
						<image @click="showRightDrawer" class="headerImg" :src="userinfo.avatar | imgurl"></image>
						<view class="headerName vertical">
							<text class="p">ID:{{userinfo.mobile}}</text>
							<text class="p">级别：{{userinfo.level}}级</text>
						</view>
					</view>
				</view>
			</view>
			<view class="myPageDiv">
				<view class="myPageDivOl">
					<view class="myPageDivLi" v-for="(item,index) in list" :key=index @click="golink(item.link)">
						<text class="iconfont icon" :class="item.url"></text>
						<text class="p">{{item.name}}</text>
						<text class="iconfont">&#xe696;</text>
					</view>
					<view class="myPageDivLi constant" @click="golink('../version/version')">
						<text class="iconfont icon icon-guanyu"></text>
						<text class="p">
							版本更新
						</text>
						<text class="version">V {{version}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-row loginOutBtn">
			<button type="default" @tap="bindLogout">退出登录</button>
		</view>

		<uni-drawer :visible="rightDrawerVisible" mode="left" @close="closeRightDrawer">
			<view style="padding:60px 30upx 30upx 30upx;">
				<view class="uni-title">Hi，{{userinfo.nickname}}</view>
				<view class="uni-helllo-text">
					<image class="DrawerImg" :src="userinfo.avatar | imgurl"></image>
				</view>
				<view class="uni-list uni-common-mt">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in screen" :key="index">
						<view class="uni-list-cell-navigate uni-navigate-right" @tap="golink(item.link)">
							{{item.type}}
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from '../../components/uni-drawer.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userName'])
		},
		components: {
			uniDrawer
		},
		data() {
			return {
				list: [{
						url: 'icon-licai',
						name: '我的抢单',
						link: '../OrderList/OrderList'
					},
					{
						url: 'icon-qianbao-',
						name: '资产明细',
						link: '../Detailed/Detailed'
					},
					{
						url: 'icon-niantie',
						name: '挂售明细',
						link: '../GsDetailed/GsDetailed'
					}, 
					{
						url: 'icon-jilu',
						name: '我要挂售',
						link: '../assets/assets?type=UFT'
					},
					{
						url: 'icon-yanzhengma',
						name: '我的激活码',
						link: '../ActivationCode/ActivationCode'
					},
					{
						url: 'icon-jiedian',
						name: '我的团队',
						link: '../MyTeam/MyTeam'
					}
				],
				rightDrawerVisible: false,
				screen: [{
						type: '修改头像',
						link: '../ModifyPicture/ModifyPicture'
					},
					{
						type: '修改昵称',
						link: '../ChangeNickname/ChangeNickname'
					},
					{
						type: '修改登录密码',
						link: '../ChangePassword/ChangePassword?type=login'
					},
					{
						type: '修改交易密码',
						link: '../ChangePassword/ChangePassword?type=tran'
					},
					{
						type: '收款二维码',
						link: '../TransferCode/TransferCode'
					}
				],
				userinfo: [],
				version: ''
			}
		},
		onLoad() {
			this.getData();
			this.version = plus.runtime.version;
		},
		onShow() {
			this.rightDrawerVisible = false;
		},
		methods: {
			...mapMutations(['logout']),
			bindLogin() {
				uni.navigateTo({
					url: '../login/login',
				});
			},
			golink(link) {
				// 跳转到其他页面
				uni.navigateTo({
					url: link
				})
			},
			getData: function(type) {
				const _this = this;
				//获取用户信息
				this.$request.get("/api/user/getUserInfo", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.userinfo = res.data.data.user;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			bindLogout() {
				//打开外部网站
				//plus.runtime.openURL('http://www.baidu.com');
				this.logout();
				/**
				 * 如果需要强制登录跳转回登录页面
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '../login/login',
					});
				}
			},
			closeRightDrawer() { //关闭抽屉式导航
				this.rightDrawerVisible = false;
			},
			showRightDrawer() { //显示抽屉式导航
				this.rightDrawerVisible = true;
			},
			item1() {
				this.rightDrawerVisible = false;
				uni.showToast({
					title: 'item1'
				});
			},

		},

		onBackPress() {
			// 返回按钮监听
			if (this.rightDrawerVisible) {
				this.rightDrawerVisible = false;
				return true;
			}
		},
		filters: {
			imgurl(value) {
				value = 'http://www.huanqiuyt.com' + value
				return value
			},
			numFilter2(value) {
				// 截取当前数据到小数点后两位
				let realVal = Number(value).toFixed(1)
				// num.toFixed(2)获取的是字符串
				return Number(realVal)
			}
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.loginOutBtn {
		margin-top: 30px;

		button.primary {
			background-color: #ff6762;
		}
	}

	.content {
		padding: 0;
		min-height: 80vh;
		background: #fff;
	}

	.hb-title {
		margin-bottom: 0;
	}

	.myPage {
		width: 100%;

		/*margin-bottom: 100px;*/
		.myBanner {
			width: 100%;
			height: 268upx;
			background: #1D7BFF url('../../static/img/mytop.png') no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-around;

			.myHaad {
				justify-content: flex-start;
				color: #fff;
				flex: 1;
				padding: 0 20px;

				.text {
					height: 80upx;
					line-height: 80upx;
					font-weight: bold;
					font-size: 22px;
					overflow: hidden;
				}

				.myHeader {
					display: flex;
					align-content: center;
					padding-top: 20upx;

					.headerImg {
						height: 96upx;
						width: 96upx;
						border-radius: 50%;
						border: 1px solid #18dcdb;
						overflow: hidden;
						>div {
							background-size: 100% !important;
						}
						img {
							width: 100%;
						}
					}

					.headerName {
						background-size: 100% 100%;
						padding: 10upx;

						>.p {
							height: 40upx;
							line-height: 40upx;
							text-align: left;
							display: initial;
							font-size: 28upx;
						}

					}
				}
			}

			>image {
				width: 224upx;
				height: 224upx;
			}
		}

		.homeBtn {
			width: 100%;
			overflow: hidden;
			padding: 4%;
			box-sizing: border-box;

			>button {
				width: 48.5%;
				height: 86px;
				font-size: 30px;
				color: #fff;
				background: #57BEDE;
				border: none;
				border-radius: 5px;

				&:nth-child(2) {
					background: #1CC1AC;
				}

				>span {
					font-size: 0.4rem;
					margin-right: 10px;
				}
			}
		}

		.theInvitation {
			width: 92%;
			height: 90px;
			line-height: 90px;
			text-align: center;
			border-radius: 8px;
			color: #fff;
			margin: auto;
			background: rgba(48, 106, 207, 1);

			>span {
				margin-right: 20px;
			}
		}

		.myPageDiv {
			box-sizing: border-box;
			background: #fff;

			.myPageDivOl {
				width: 90%;
				margin: auto;

				.myPageDivLi {
					width: 100%;
					overflow: hidden;
					font-size: 14px;
					color: #777C83;
					height: 50px;
					display: flex;
					border-bottom: 1px solid rgba(112, 112, 112, 0.13);
					justify-content: space-between;
					align-items: center;

					.image {
						width: 40upx;
						height: 40upx;
					}

					.image2 {
						width: 20upx;
						height: 20upx;
					}

					.p {
						flex: 1;
						margin-left: 10upx;
					}

					.iconfont {
						font-size: 16px;
						font-weight: 700;
					}

					.icon {
						color: #1C87DA;
					}

					.version {
						font-size: 28upx;
						color: #1C87DA;
						margin-right: 10upx;
					}
				}
			}
		}
	}

	.showcharging {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99999;

		.choice {
			background: #fff;
			position: absolute;
			width: 70%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			h3 {
				height: 1rem;
				line-height: 1rem;
				font-size: 0.4rem;
				text-align: left;
				padding: 0 0 0 30px;

				span {
					float: right;
					width: 80px;
					text-align: center;
					font-size: 0.36rem;
					font-weight: 700;
				}
			}

			p {
				line-height: 1rem;
			}

			.title {
				font-weight: 700;
				font-size: 0.46rem;
			}

			.email {
				font-size: 0.4rem;
			}

			.copy {
				color: #009688;
				border-top: 1px solid #eee;
				line-height: 1.4rem;
				font-weight: 700;
			}
		}
	}

	.uni-title {
		text-align: center;
	}

	.uni-helllo-text .DrawerImg {
		width: 60px;
		height: 60px;
		margin: 20px auto;
		display: block;
		overflow: hidden;

		img {
			width: 100%;
		}
	}

	.uni-list-cell-navigate {
		text-align: center;
		font-size: 14px;
		line-height: 50px;
		border-bottom: 1px solid #F1F1F1;
	}
</style>
